<template>
    <div class="rank-goods" :style="{
      backgroundColor: config.pageConfig.color,
    }">
        <div :style="{
        marginTop: config.pageConfig.marginTop + 'px',
        marginBottom: config.pageConfig.marginBottom + 'px',
        marginLeft: config.pageConfig.margin + 'px',
        marginRight: config.pageConfig.margin + 'px',
        }">
            <div class="rank-title" v-if="config.pageConfig.titleShow">
                <div :style="{
                    marginRight:'4px',
                    backgroundImage:`linear-gradient(to left,${config.pageConfig.titleLineColor}, transparent)`
                }" class="rank-title-line"></div>
                <img :src="config.pageConfig.titleImg">
                <div :style="{
                  color: config.pageConfig.titleColor
                }">{{config.pageConfig.title}}</div>
                <div :style="{
                    marginLeft:'4px',
                    backgroundImage:`linear-gradient(to right,${config.pageConfig.titleLineColor}, transparent)`
                }" class="rank-title-line"></div>
            </div>

            <div :class="`goods-${config.pageConfig.custom}`">
                <div v-for="(item, idx) in contentList" :key="idx" class="content-list"
                :style="config.pageConfig.custom == '1' || config.pageConfig.custom == '2'? {
                    width: `calc(50% - ${config.pageConfig.distance}px)`,
                    margin: `${config.pageConfig.distance / 2}px`,
                }:config.pageConfig.custom == '3'
                ? {
                    width: `calc(33.3% - ${config.pageConfig.distance/3}px)`,
                    margin: `${config.pageConfig.distance / 3}px`,
                }: {
                    marginBottom: config.pageConfig.distance + 'px',
                }"
                @click="toDetail(item.id)">
                    <div :class="config.pageConfig.style == 2 ? 'shadow-style' : ''" :style="
                        config.pageConfig.style == 3
                            ? {
                            borderStyle: 'solid',
                            borderWidth: config.pageConfig.borderWidth + 'px',
                            borderColor: config.pageConfig.borderColor
                            }
                            : {
                            }
                    ">
                        <div :style="{
                            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                            borderColor: config.pageConfig.borderColor,
                            backgroundColor: config.pageConfig.goodsColor,
                        }">
                            <img :style="{
                            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                            }" v-if="item.thumbnailUrl && config.pageConfig.custom == '1'" class="banner-img"
                                :src='item.thumbnailUrl' alt="" />
                            <div :style="{
                            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                            }" v-else-if="item.thumbnailUrl && config.pageConfig.custom != '1'" class="banner-img"
                                alt="">
                                <div :style="{
                                    backgroundImage: 'url(' + item.thumbnailUrl + ')',
                                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                                    borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                                }" class="goods-image">
                                </div>
                            </div>
                            <img :style="{
                              borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                              borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                              borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                              borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                            }" v-else src="../../../../../../assets/app/bar/default_banner.png" class="banner-img" alt="" />
                            <div class="goods-detail">
                                <h4 v-if="config.pageConfig.titleShow" :style="{
                                  color: config.pageConfig.titlecolor,
                                }">
                                    {{ item.name }}
                                </h4>
                                <p class="salenum" v-if="
                                  config.pageConfig.salenumShow &&
                                  (config.pageConfig.custom == '1' ||
                                    config.pageConfig.custom == '3')
                                " :style="{
                                        color: config.pageConfig.salenum,
                                    }">
                                    已售{{ item.sellCount }}
                                </p>
                                <div style='height: 30px;'>
                                    <p v-if="config.pageConfig.priceShow" :style="{
                                      color: config.pageConfig.price,
                                    }" class="price">
                                        {{ getPayMoney(item) }}
                                    </p>
                                    <p class="purchase" v-if="config.pageConfig.custom != '2'">
                                        <span v-if="
                                          (config.pageConfig.custom == '1' ||
                                            config.pageConfig.custom == '2' ||
                                            config.pageConfig.custom == '3') && !config.pageConfig.carUrl
                                        ">购买</span>
                                        <img :src="config.pageConfig.carUrl" v-else-if="(config.pageConfig.custom == '1' ||
                                        config.pageConfig.custom == '2' ||
                                        config.pageConfig.custom == '3') && config.pageConfig.carUrl">
                                        <el-icon v-else>
                                        <CirclePlusFilled />
                                        </el-icon>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: "Rank",
};
</script>
<script lang="ts" setup>
// import { Icon as VanIcon } from "vant";
import { reactive, onMounted, ref } from "vue";
// import { productDetail } from "@/api/actapp";
const config = defineProps({
    pageConfig: {
        type: Object,
        default: {
            custom: "1",
            style: "1",
            borderWidth: 1,
            borderColor: "#ededed",
            titleShow: true,
            titleColor: "#333",
            titleLineColor: "#333",
            title: '商品排行',
            titleImg: './imagesStatic/1662518195000G6B5ranking.png',
            classifyId: "",
            showCount: 1,
            keyword: '',
            lowPrice: '',
            highPrice: '',
            color: "",
            goodsColor: "#fff",
            goodsTitleShow: true,
            goodsTitlecolor: "#999ca7",
            priceShow: true,
            price: "#fd463e",
            salenumShow: true,
            salenum: "#999CA7",
            carUrl: "",
            distance: 12,
            marginTop: 12,
            marginBottom: 12,
            margin: 12,
            radiusTop: 4,
            radiusBottom: 4,
            mallId: ''
        },
    },
    show: {
        type: Boolean,
        default: true,
    },
});
const contentList = ref([] as Array<any>);
const getContentList = () => {
  //contentList是由goodType classifyId sortType共同决定的
  contentList.value.push(
    {
      id: "",
      title: "杯子男家用马克杯瓷杯陶瓷女创意个性北欧办公室喝水杯早餐杯",
      subtitle: "杯子男家用马克杯瓷杯陶瓷女创意个性北欧办公室喝水杯早餐杯",
      price: "99",
      delPrice: "129",
      salenum: "0",
      imgUrl: "",
      name: "",
      url: "",
    },
    {
      id: "",
      title: "杯子男家用马克杯瓷杯陶瓷女创意个性北欧办公室喝水杯早餐杯",
      subtitle: "杯子男家用马克杯瓷杯陶瓷女创意个性北欧办公室喝水杯早餐杯",
      price: "99",
      delPrice: "129",
      salenum: "",
      imgUrl: "",
      name: "",
      url: "",
    },
    {
      id: "",
      title: "杯子男家",
      subtitle: "杯子男家用马克杯瓷杯陶瓷女创意个性北欧办公室喝水杯早餐杯",
      price: "99",
      delPrice: "129",
      salenum: "",
      imgUrl: "",
      name: "",
      url: "",
    }
  );
};

let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
onMounted(() => {
  getContentList();
});
</script>
<style lang="scss" scoped>
.rank-goods {
    width: 100%;
    height: 100%;
    overflow: hidden;
    bottom: 0;

    &:hover {
        .sure-close {
            display: block;
        }
    }

    .rank-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom:10px;
        img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        .rank-title-line {
            width: 30px;
            height: 2px;
        }
    }
}
.goods-detail {
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
  box-sizing: border-box;

  h4 {
    font-size: 14px;
    line-height: 18px;
    max-height: 36px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .subtitle {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    width: 100%;
    color: #999ca7;
    margin-bottom: 4px;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
  }

  .salenum {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 6px;
  }

  div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    p {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .purchase {
      cursor: pointer;

      img {
        width: auto;
        height: 30px;
      }

      span {
        display: flex;
        align-items: center;
        padding: 4px 8px;
      }
    }
  }
}
.goods-1 {
  display: flex;
  flex-wrap: wrap;

  .banner-img {
    width: 100%;
    height: 150px;
    background: #fff;

    .goods-image {
      width: 100%;
      height: 150px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }

  >div {

    .goods-detail {
      h4 {
        height: 40px;
        max-height: 40px;
        font-size: 15px;
        line-height: 20px;
        font-weight: 700;
        margin-bottom: 6px;
      }

      >div {
        p.price {
          font-size: 12px;
          overflow: hidden;
          max-width: 80px;
          text-overflow: ellipsis;
          white-space: nowrap;

          span {
            display: block;
          }
        }
      }

      .purchase {
        z-index: 2;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;

        span {
          border: 1px solid #f55;
          background: #f55;
          color: #fff;
          line-height: 1;
          text-decoration: initial;
        }
      }
    }
  }
}

.goods-2 {
  display: flex;
  flex-wrap: wrap;

  .content-list {
    height: 80px;
  }

  .banner-img {
    width: 80px;
    height: 80px;
    background: #fff;

    .goods-image {
      width: 80px;
      height: 80px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }

  >div {
    >div {
      >div {
        display: flex;
      }

    }

    .goods-detail {
      height: 80px;

      h4 {
        height: 40px;
        max-height: 40px;
        font-size: 15px;
        line-height: 20px;
        font-weight: 400;
        margin-bottom: 0px;
      }

      .price {
        white-space: nowrap;
        height: 20px;
        width: 100%;
      }
    }
  }
}
.goods-3 {
  display: inline-flex;
  flex-wrap: nowrap;
  overflow-y: auto;
  width: 100%;
  .banner-img {
    display: block;
    width:100%;
    min-width: 100px;
    height: 100px;
    background: #fff;

    .goods-image {
      width: 100%;
      height: 100px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }

  h4 {
    height: 40px;
    max-height: 40px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 6px;
  }

  >div {
    p.price {
      font-size: 12px;
      overflow: hidden;
      max-width: 75px;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        display: block;
      }
    }
  }


  .purchase {
    z-index: 2;
    color: #f55;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    span{
        color:#fff;
        background: #f55;
    }
  }
}

.shadow-style {
  border-color: transparent;
  box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -webkit-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -moz-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
}
</style>
